*{
    padding: 0;
    margin: 0;
}
.wn3{
    width: 200px;
    height: 50px;
    margin: 100px auto;
    position: relative;
    transform-style: preserve-3d;
    perspective: 500px;
}
.wn{
    width: 200px;
    height: 50px;
    background: rgba(125,12,67,0.1);
    position: absolute;
    transform: rotateX(0deg);
    transition: transform  0.5s linear;
}
.wn1{
    width: 200px;
    height: 50px;
    background: rgba(25,122,167,0.1);
    position: absolute;
    transform: rotateX(270deg);
    transition: transform 0.5s linear;
}

.wn3:hover .wn{
    transform: rotateX(90deg);
}
.wn3:hover .wn1{
    transform: rotateX(360deg);
}